<template>
  <el-dialog
    :title="is_add?'新建工单':'编辑工单'"
    :visible.sync="dialog"
    :modal="true"
     @close="closeDialog"
    :modal-append-to-body="false"
    width="600px"
  >
    <div style="max-height:420px;overflow:auto;">
      <el-form :model="form" ref="form" :rules="rules" size="small">
        <el-form-item label="工单类型" :label-width="formLabelWidth">
          <el-select disabled v-model="form.categoryId" placeholder="请选择申报类型" style="width:100%;">
             <el-option
              v-for="item in orderCategoryList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系人" :label-width="formLabelWidth"  prop="customerName">
          <el-input v-model="form.customerName" autocomplete="off" maxlength="10" :disabled="!is_add" placeholder="请输入联系人"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="form.phone" autocomplete="off" :disabled="!is_add" maxlength="11" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="组织机构" :label-width="formLabelWidth" prop="deptId">
           <el-select :disabled="!is_add" v-model="form.deptId" placeholder="请选择组织机构" style="width:100%;">
             <el-option
              v-for="item in menus"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <!-- <treeselect v-model="form.deptId" :options="menus" :disabled="!is_add" placeholder="选择所属行业" /> -->
        </el-form-item>
        <el-form-item label="区域名称" :label-width="formLabelWidth">
          <city :addr_this="addr_this" :citys="citys" ref="city" :disabled="!is_add"></city>
        </el-form-item>
        <el-form-item label="详细地址" :label-width="formLabelWidth" prop="address">
          <el-input v-model="form.address" autocomplete="off" maxlength="20" placeholder="请输入详细地址"></el-input>
        </el-form-item>
        <el-form-item label="派单人员" :label-width="formLabelWidth" prop="actionUid">
          <el-select
            v-model="form.actionUid"
            placeholder="请选择派单人员"
            style="width:100%;"
            @focus="paidan"
          >
            <el-option
              v-for="item in users_list"
              :key="item.id"
              :label="item.username+'-'+item.phone"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.mark" autocomplete="off"  maxlength="20" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="doSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  _chartUsers,
  _deptList,
  _ordersCreate,
  _ordersUpdate,
  _ordersModify,
  _orderCategory
} from "@/http/ajax";
import city from "@/components/citys/index.vue";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import * as MDZZ from "@/http/reg";
export default {
  components: { Treeselect, city },
  props: {
    cur_this: {
      type: Object,
      default: null
    },
    is_add: {
      type: Boolean,
      default: false
    }
  },
  name: "addnet",
  data() {
     const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("手机号不能为空"));
      } else if (!MDZZ.shoujihao(value)) {
        callback(new Error("手机号格式不对"));
      } else {
        callback();
      }
    };
    return {
      addr_this: this,
      citys: {
        provinceId: 0,
        cityId: 0,
        districtId: 0
      },
      formLabelWidth: "100px",
      dialog: false,
      loading: false,
      form: {
        customerName: "",
        categoryId: 1,
        phone: "",
        actionUid: "",
        address: "",
        mark: "",
        cityId: "",
        districtId: 0,
        deptId: '',
        status: 0,
        flowStatus: 0,
        equipment_id: 0
      },
      rules: {
        customerName: [{ required: true, message: "请输入联系人", trigger: "blur" }],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" }
        ],
         phone: [{ required: true, trigger: "blur", validator: validPhone }],
        actionUid: [
          { required: true, message: "请输入派单人员", trigger: "change" }
        ],
        deptId: [
          { required: true, message: "请选择组织机构", trigger: "change" }
        ],
        districtId: [
          { required: true, message: "请完善地址", trigger: "change" }
        ]
      },
      menus: [],
      users_list: [],
      orderCategoryList:[]
    };
  },
  methods: {
    paidan() {
      if (!this.form.deptId) {
        this.$message("请选择组织机构");
        return;
      }
      let data = {
        deptId: this.form.deptId,
        level: sessionStorage.level
      };
      Object.keys(this.citys).forEach(key => {
        data[key] = this.citys[key];
      });
      _chartUsers(
        data,
        res => {
          this.users_list = res.content;
        },
        err => {}
      );
    },
    domInit() {
      _deptList(
        { page: 0, size: 10000 },
        res => {
          //   this.menus = [{
          //   createTime: null,
          //   enabled: true,
          //   id: 0,
          //   label: "顶级目录",
          //   pid: 0,
          //   children: res.content
          // }];
          this.$refs["form"].resetFields();
          this.menus = res.content;
        },
        err => {}
      );
      this.getOrderCategory()
    },
    getOrderCategory() {
      _orderCategory(
        res => {
          this.orderCategoryList = res.content;
        },
        err => {}
      );
    },
    doSubmit() {
      Object.keys(this.citys).forEach(key => {
        this.form[key] = this.citys[key] || "";
      });
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (!this.form.deptId) {
            this.$message("请选择组织机构");
            return;
          }
          if (!this.form.districtId) {
            this.$message("请完善工单的区域（省、市、区）");
            return;
          }
          let user = JSON.parse(sessionStorage.user);
          let level = sessionStorage.level;
          if (level == 2 && this.form.provinceId !== user.provinceId) {
            this.$message({
              message: `区域只能选择${user.province.name}`,
              type: "warning"
            });
            return;
          }
          if (this.is_add) {
            _ordersCreate(this.form, res => {mdzz()
             this.$message({
                    message: "操作成功",
                    type: "success"
                  });
                  this.$refs["form"].resetFields();
            }, err => {});
          } else {
              let data = {
                id: this.form.id,
                flowStatus: 0,
                status: 0,
                images: '',
                address: this.form.address,
                actionUid: this.form.actionUid,
                mark: this.form.mark
              };
              _ordersModify(
                data,
                res => {
                  mdzz()
                  this.$refs["form"].resetFields();
                   this.$message({
                    message: "操作成功",
                    type: "success"
                  });
                },
                err => {}
              );
          }
          const othis = this;
          function mdzz() {
            othis.dialog = false;
            othis.cur_this.getList();
            // othis.form = {
            //   customerName: "",
            //   categoryId: 1,
            //   phone: "",
            //   actionUid: "",
            //   address: "",
            //   mark: "",
            //   cityId: "",
            //   districtId: 0,
            //   deptId: '',
            //   status: 0,
            //   flowStatus: 0
            // };
            othis.citys = {
              provinceId: 0,
              cityId: 0,
              districtId: 0
            };
            const _this = othis.$refs.city;
            _this.dataInit();
          }
        }
      });
    },
     closeDialog() {this.$refs["form"].resetFields();}
  }
};
</script>

<style lang="scss">
</style>
